﻿@model IEnumerable<ORM.Business.Models.Entities.Guide>

@{
    ViewBag.Title = "Hướng Dẫn";
}

<table width="100%" style="padding: 0px">
<colgroup>
<col span="1" style="width: 80%;"/>
<col span="1" style="width: 20%;"/>
</colgroup>
<tr>
 <td style="vertical-align: top; padding: 0px" width="80%">
            <table class="contentBox" width="100%" style="height: 1000px;">
              <tr>

                    <th class="boxTitle">Hướng Dẫn<span id="guideDeviceNavigator"></span></th>
                </tr>

             <tr>

                 <td style="vertical-align: top;">
                     @if (ViewBag.Message == "Bài viết của bạn đã được gửi để chờ kiểm duyệt!")
                     {
                         <span style="color: red; font-style: italic">@ViewBag.Message </span><br/>
                     }
                     <div id="searchGuideNavigator" style="display: none">Bạn đang xem kết quả tìm kiếm cho "<span id="searchGuideNavigatorString" style="font-style: italic"></span>"</div>                                
                     <div id="questionTabs" class="css-tabs" style="width: 100%; vertical-align: bottom; height: 33px; display: inline-block; padding-top: 15px">
                         <ul class="menu" id="tabsfullbox" style="height: 100%; width: 100%">
                             <li id="tabs-1"  style="height: 100%">
                                 <a href="#tabs-1" id="tab1" onclick="loadGuideTab(1)">Bài Mới</a>            
                             </li>
                             <li id="tabs-2"  style="height: 100%">
                                 <a href="#tabs-2" id="tab2" onclick="loadGuideTab(2)">Bài Hữu Ích</a>           
                             </li> 
                             <span style="float: right; padding-left: 20px; padding-bottom: 20px">

                                 @using (Html.BeginForm("Create", "Guide", FormMethod.Get))
                                 
                                 {
                                     <input type="submit" id="createNewGuideBtn" class = "colorButton" value = "Tạo Hướng Dẫn Mới" style="width: 100%; height: 30px"/>
                                 }</span>
                         </ul>

                     </div>

                     <div style="width: 100%; border-top: solid 1px #808080; padding-top: 10px"> 
 
                         <div class="tabsfullcontent" id="tabContent"></div>

                     </div>
                     <br/>
                 </td>
</tr>
</table>
</td>
<td style="vertical-align: top; width: 20%; padding: 0px; padding-left: 2px">
            <table class="contentBox" width="100%">
                <tr>
                    <th class="boxTitle">Tìm Kiếm Hướng Dẫn</th>
                    
                </tr>
                <tr>
                    <td style="background-color: #EDEDED">
                        Nhập Từ Khoá<br/>
                        <form action="#" method="post"><div class="field-holder" style="width: 100%">
        <input type="text" id="txtSearchGuide" class="field" value="" title=""/>
      </div><div align="center" style="padding-top: 7px"><input type="button" id="btnSearchGuide" value="Tìm Hướng Dẫn" style="width:60%; height:27px;  font-size: 13px"/></div></form>
                    </td>
                </tr>
            </table>
            <br/>
            <table class="contentBox" width="100%">
                
                <tr>
                    <th class="boxTitle">Lọc Bài</th>
                </tr>   
                <tr>
                    <td style="background-color: #EDEDED">
                        Loại Thiết Bị<br/>
                        @Html.DropDownList("Device_Name", (IEnumerable<SelectListItem>)(ViewBag.Device_Name), new { style = "width: 100%;" })
                        <br/>
                        <div style="padding-top: 7px">Hãng Sản Xuất</div>
                        @Html.DropDownList("Manufacturer_Name", (IEnumerable<SelectListItem>)(ViewBag.Manufacturer_Name), new { style = "width: 100%;" })
                        <br/>
                        <div style="padding-top: 7px">Đời Máy</div>
                        @Html.DropDownList("Model_Name", (IEnumerable<SelectListItem>)(ViewBag.Model_Name), new { style = "width: 100%;", id = "Model_Name" })
                        <br/>
                        <div style="padding-top: 7px">Loại Bài</div>
                        @Html.DropDownList("GuideType_Name", (IEnumerable<SelectListItem>)(ViewBag.GuideType_Name), new { style = "width: 100%;", id = "GuideType_Name" })
                        <br/>
                        <div align="center" style="padding-top: 7px">
                            <input type="button" id="btnModelSearch" value="Lọc Hướng Dẫn" style="width:60%; height:27px;  font-size: 13px"/>
                        </div>
                        @Html.Hidden("Device_Id", 0)
                        @Html.Hidden("Manufacturer_Id", 0)
                        @Html.Hidden("Model_Id", 0)
                        @Html.Hidden("GuideType_Id", 0)
                        @Html.Hidden("DeviceName", "")
                        @Html.Hidden("ManufacturerName", "")
                        @Html.Hidden("ModelName", "")
                        @Html.Hidden("GuideTypeName", "")
                        @Html.Hidden("StringToSearch", "")
                    </td>
                </tr>
            </table>
        </td>
        
    </tr>
</table>
@*<p>
    @Html.ActionLink("Create New", "Create")
</p>*@


<script src="@Url.Content("~/Scripts/ui_core.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/ui_tabs.js")" type="text/javascript"> </script>

<script type="text/javascript">
    $('#btnSearchGuide').click(function () {
//        $('#Device_Id').val(0);
//        $('#DeviceName').val("");
//        $('#Manufacturer_Id').val(0);
//        $('#ManufacturerName').val("");
//        $('#Model_Id').val(0);
//        $('#ModelName').val("");
//        $('#StringToSearch').val($('#txtSearchGuide').val().trim());
//        if ($('#StringToSearch').val() != null && $('#StringToSearch').val() != "") {
//            $('#searchGuideNavigator').css("display", "inline");
//            var searchString = $('#StringToSearch').val();
//            document.getElementById('searchGuideNavigatorString').innerHTML = searchString;
//        }
//        $('#guideDeviceNavigator').css("display", "none");
        if($('#txtSearchGuide').val().trim() != "") {
            window.location = "/Guide/Index?stringToSearch=" + $('#txtSearchGuide').val();
        }
         
    });

    $('#btnModelSearch').click(function () {
//        $('#StringToSearch').val("");
//        $('#Device_Id').val($('#Device_Name').val());
//        $('#DeviceName').val($('#Device_Name option:selected').text());
//        $('#Manufacturer_Id').val($('#Manufacturer_Name').val());
//        $('#ManufacturerName').val($('#Manufacturer_Name option:selected').text());
//        $('#Model_Id').val($('#Model_Name').val());
//        $('#ModelName').val($('#Model_Name option:selected').text());
//        loadGuideTab(1);
//        var guideNavigator = "";
//        if ($('#Device_Id').val() != 0) {
//            guideNavigator += $('#DeviceName').val() + " ";
//        }
//        if ($('#Manufacturer_Id').val() != 0) {
//            guideNavigator += $('#ManufacturerName').val() + " ";
//        }
//        if ($('#Model_Id').val() != 0) {
//            guideNavigator += $('#ModelName').val();
//        }
//        if (guideNavigator != "") {
//            guideNavigator = " - " + guideNavigator;
//            $('#guideDeviceNavigator').css("display", "inline");
//            document.getElementById('guideDeviceNavigator').innerHTML = guideNavigator;
//        }
//        
//        $('#searchGuideNavigator').css("display", "none");
        window.location = "/Guide/Index?deviceId=" + $('#Device_Name').val() + "&manufacturerId=" + $('#Manufacturer_Name').val() + "&modelId=" + $('#Model_Name').val() + "&guideTypeId=" + $('#GuideType_Name').val();
        
    });
    $('#Manufacturer_Name').change(function () {
        var selectedManfacturerId = $(this).val();
        var selectedDeviceId = $('#Device_Name').val();
        $.getJSON('@Url.Action("ManufacturerNameChange")', { Manufacturer_Id: selectedManfacturerId, Device_Id: selectedDeviceId }, function (models) {
            var modelsSelect = $('#Model_Name');
            modelsSelect.empty();
            modelsSelect.append($('<option/>', {
                value: 0,
                text: ""
            }));
            $.each(models, function (index, model) {
                modelsSelect.append($('<option/>', {
                    value: model.Id,
                    text: model.Name
                }));
            });
        });
        return;
    });
    $('#Device_Name').change(function () {
        var selectedManufacturerId = $('#Manufacturer_Name').val();
        var selectedDeviceId = $(this).val();
        $.getJSON('@Url.Action("DeviceNameChange")', { Manufacturer_Id: selectedManufacturerId, Device_Id: selectedDeviceId }, function (models) {
            var modelsSelect = $('#Model_Name');
            modelsSelect.empty();
            modelsSelect.append($('<option/>', {
                value: 0,
                text: ""
            }));
            $.each(models, function (index, model) {
                modelsSelect.append($('<option/>', {
                    value: model.Id,
                    text: model.Name
                }));
            });
        });
        return;
    });






    function loadGuideTab(index) {
        var tabContentDiv = "tabContent";
        //Set lai bottomBorder cho cac tab
        for (var i = 1; i <= 2; i++) {
            var tabId = "tab" + i;
            var myTab = document.getElementById(tabId);
            if (i != index) {
                myTab.style.borderBottom = "1px solid #808080";
            } else {
                myTab.style.borderBottom = "solid 1px white";
            }
        }

        var targetDiv = "tabContent-" + index;
        //$(targetDiv).html("<img src='@Url.Content("~/Content/images/main/loading.gif")' style='margin-left: 455px;'/>");
        //document.getElementById(tabContentDiv).innerHTML = "Đang tải dữ liệu...";

        //set url and data to send
        var url;
        var condition;
        var deviceId = 0;
        var manufacturerId = 0;
        var modelId = 0;
        var guideTypeId = 0;
        var stringToSearch = "";
        if ($('#Device_Id').val() != null) {
            deviceId = $('#Device_Id').val();
        }
        if ($('#Manufacturer_Id').val() != null) {
            manufacturerId = $('#Manufacturer_Id').val();
        }
        if ($('#Model_Id').val() != null) {
            modelId = $('#Model_Id').val();
        }
        if ($('#GuideType_Id').val() != null) {
            guideTypeId = $('#GuideType_Id').val();
        }
        if ($('#StringToSearch').val() != null) {
            stringToSearch = $('#StringToSearch').val();
        }
        if (index == 1) {
            condition = "new";
        }
        else if (index == 2) {
            condition = "useful";
        }
        url = "/Guide/GetGuideList?condition=" + condition + "&deviceId=" + deviceId + "&manufacturerId=" + manufacturerId + "&modelId=" + modelId + "&stringToSearch=" + stringToSearch + "&guideTypeId=" + guideTypeId;
        $.get(url, function (result) {
            document.getElementById(tabContentDiv).innerHTML = result;
        });
        if (condition == "new" && deviceId == 0 && manufacturerId == 0 && modelId == 0 && stringToSearch == "") {
            window.location.hash = "";
            return;
        }
        //HoaVT - comment to hide hash
        //window.location.hash = condition + "-" + deviceId + "-" + manufacturerId + "-" + modelId + "-" + stringToSearch;
    }

    $(document).ready(function () {
        $('#guideDeviceNavigator').css("display", "none");
        $('#searchGuideNavigator').css("display", "none");
        var deviceSelect = $('#Device_Name');
        deviceSelect.prepend($('<option/>', {
            value: 0,
            text: ""
        }));
        deviceSelect.val(0);
        var manufacturerSelect = $('#Manufacturer_Name');
        manufacturerSelect.prepend($('<option/>', {
            value: 0,
            text: ""
        }));
        manufacturerSelect.val(0);
        var modelSelect = $('#Model_Name');
        modelSelect.prepend($('<option/>', {
            value: 0,
            text: ""
        }));
        modelSelect.val(0);
        var guideTypeSelect = $('#GuideType_Name');
        guideTypeSelect.prepend($('<option/>', {
            value: 0,
            text: ""
        }));
        guideTypeSelect.val(0);
        $('#tabsfullbox').tabs();
//        var myArray = new Array();
//        myArray = window.location.hash.substring(1).split('-');
//        $('#Device_Id').val(myArray[1]);
//        $('#Manufacturer_Id').val(myArray[2]);
//        $('#Model_Id').val(myArray[3]);
//        $('#StringToSearch').val(myArray[4]);
//        $("#tabsfullbox").tabs();
        document.getElementById('StringToSearch').innerHTML = "@ViewBag.StringToSearch";
//        $('#StringToSearch').val("@ViewBag.StringToSearch");
//        $('#txtSearchGuide').val('@ViewBag.StringToSearch');
        if(@ViewBag.DeviceId != 0) {
            $('#Device_Id').val(@ViewBag.DeviceId);
            $('#DeviceName').val('@ViewBag.DeviceName');
        }
        if(@ViewBag.ManufacturerId != 0) {
            $('#Manufacturer_Id').val(@ViewBag.ManufacturerId);
            $('#ManufacturerName').val('@ViewBag.ManufacturerName');
        }
        if(@ViewBag.ModelId != 0) {
            $('#Model_Id').val(@ViewBag.ModelId);
            $('#ModelName').val('@ViewBag.ModelName');
        }
        if(@ViewBag.GuideTypeId != 0) {
            $('#GuideType_Id').val(@ViewBag.GuideTypeId);
            $('#GuideTypeName').val('@ViewBag.GuideTypeName');
        }
//        if (myArray[0] == "" || myArray[0] == "new") {
//            loadGuideTab(1);
//        }
//        else if (myArray[0] == "helpful") {
//            loadGuideTab(2);
//        }
//        else if (myArray[0] == "resolved") {
//            loadGuideTab(3);
//        }
//        else if (myArray[0] == "unresolved") {
//            loadGuideTab(4);
//        }
//        else if (myArray[0] == "unanswered") {
//            loadGuideTab(5);
//        }
        loadGuideTab(1);
        if ($('#StringToSearch').val() != null && $('#StringToSearch').val() != "") {
            $('#guideDeviceNavigator').css("display", "none");
            $('#searchGuideNavigator').css("display", "inline");
            $('#tab1').css("display", "none");
            $('#tab2').css("display", "none");
            var searchString = $('#StringToSearch').val();
            document.getElementById('searchGuideNavigatorString').innerHTML = searchString;
        }
        else {
            var guideNavigator = "";
            if ($('#Device_Id').val() != 0) {
                guideNavigator += $('#DeviceName').val() + " ";
            }
            if ($('#Manufacturer_Id').val() != 0) {
                guideNavigator += $('#ManufacturerName').val() + " ";
            }
            if ($('#Model_Id').val() != 0) {
                guideNavigator += $('#ModelName').val();
            }
            if ($('#GuideType_Id').val() != 0) {
                guideNavigator += $('#GuideTypeName').val();
            }
            if (guideNavigator != "") {
                guideNavigator = " - " + guideNavigator;
                $('#guideDeviceNavigator').css("display", "inline");
                document.getElementById('guideDeviceNavigator').innerHTML = guideNavigator;
            }

            $('#searchGuideNavigator').css("display", "none");
        }
        deviceSelect.val( $('#Device_Id').val());
        manufacturerSelect.val( $('#Manufacturer_Id').val());
        //$('#Device_Name').change();
        if($('#Model_Id').val() != 0) {
            $('#Model_Name').val($('#Model_Id').val());
        }
        guideTypeSelect.val($('#GuideType_Id').val());
    });
</script>
















